<header>
<h1>Listing <%= plural_name %></h1>
</header>
<entry>

<div style="position:absolute;width:100%;height:100%;background:gray;opacity:0.8" id="updatewin">
	<div style="width:50%;background:white;boder: 1px solid black;-moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px;margin-left:auto;margin-right:auto;margin-top: 30px;padding:30px;opacity:1.0">
		<h1>Update</h1>
		<table>
		<% for attribute in attributes %>
			<tr><td><%= attribute.column.human_name %></td><td><input type="text" name="<%= attribute.name %>" id="update_<%= attribute.name %>"></td></tr>
		<% end %>
		</table>
		<input type="button" value="update" id="btnupdate">
		<input type="button" value="cancel" id="btncancel">
	</div>
</div>

	<table>
	
  <% for attribute in attributes %>
  	<tr><td><%= attribute.column.human_name %></td><td><input type="text" name="<%= attribute.name %>" id="<%= attribute.name %>"></td></tr>
  <% end %>
  </table>
  <input type="button" value="create" id="create">
  <input type="button" value="reload" id="reload">
  <div id="table"></div>
</entry>
<input type="button" onclick="reset();" value="reset DB">
<br />
<footer>
</footer>

<script>

var tmp = {};
var updateid = -1;
var <%= singular_name %> = null;
var g_ldb = null;
var g_attrs = [];

function reset() {
	g_ldb.reset();
	index();
}

function showupdatewin(id) {
	$("#updatewin").fadeIn();
	
	var obj = g_ldb.find(id);
	
	<% for attribute in attributes %>
	$("#update_<%= attribute.name %>").val(obj.<%= attribute.name %>);
	<% end %>
	updateid = id;
}
$("#btnupdate").click(function(){
	var obj = {};
	<% for attribute in attributes %>
	obj.<%= attribute.name %> = $("#update_<%= attribute.name %>").val();
	<% end %>
//s	obj.id = updateid;
	$("#updatewin").fadeOut();
	update(obj);
});
$("#btncancel").click(function(){
	$("#updatewin").fadeOut();
});

$('#create').click(function(e) {
	var param = {
  <%
  i = 0
  for attribute in attributes
  %>
  	<%=h (i != 0 ? "," : "") %>
  	<% i += 1; %>
  	<%= attribute.name %> : $('#<%= attribute.name %>').val()
  <% end %>
  };
    <% for attribute in attributes %>
  	$('#<%= attribute.name %>').val('');
	<% end %>

  	create(param);
});

$('#reload').click(function(e) {
	index();
});


$(document).ready(function(){
	webrpc.load("/javascripts/<%= plural_name %>.js", function(services, error){
		<%= singular_name %> = services.<%= plural_name %>;
		
		init({}, index);
	});
	$("#updatewin").css({'display' : 'none'});	
});



///////////////////////////////////////////////////////////////
// belows are crud interfaces.
///////////////////////////////////////////////////////////////
function init(obj, func) {
	if(typeof(obj) != 'object')
		obj = {};

	obj.singular_name = '<%= singular_name %>';
	obj.plural_name = '<%= plural_name %>';
	
	obj.db = {
		version : <%= Time.now.to_i %> ,
		attributes : []
	};
	
	// v = '<%= Time.now.to_i %>'
	<% for attribute in attributes %>
		obj.db.attributes.push({name : '<%= attribute.name %>', type : '<%= attribute.type %>'});
		g_attrs.push('<%= attribute.name %>');
	<% end %>
	g_ldb = new wmrLocalDB('<%= plural_name %>', g_attrs);

	<%= singular_name %>.init(obj, function(res) {
		if(typeof(func) == 'function') 
			func();
	});
};

function index() {
	var obj = g_ldb.find(); //(obj);

	var _show = function(res) {
		$('#table').css({'display' : 'none'});
		$('#table').empty();
		
		<%
		tbl_title = ''
		tbl_col = ''
		for attribute in attributes
			tbl_title += '<th>'+attribute.name+'</th>'
			tbl_col += "<td>'+_res."+attribute.name+"+'</td>"
		end
		tbl_col += '<td><span style="text-decoration:underline;cursor:pointer" onclick="destroy(\'+i+\');">delete</span>&nbsp;<span style="text-decoration:underline;cursor:pointer" onclick="showupdatewin(\'+i+\');">update</span></td>';
		%>
		
		var out = '<table><tr><%= tbl_title %><th></th></tr>';
		tmp.length = 0; // clean up.
		for(var i in res) {
			var _res = res[i];
			out += '<tr><%= tbl_col %></tr>';
			tmp[_res.id] = _res;
		}
		out += '</table>';
		$('#table').html(out).fadeIn();
	}
	_show(obj);

/*
	<%= singular_name %>.find({
		id: 'all'
	}, function(res) {
		$('#table').css({'display' : 'none'});
		$('#table').empty();
		
		<%
		tbl_title = ''
		tbl_col = ''
		for attribute in attributes
			tbl_title += '<th>'+attribute.name+'</th>'
			tbl_col += "<td>'+_res."+attribute.name+"+'</td>"
		end
		tbl_col += '<td><span style="text-decoration:underline;cursor:pointer" onclick="destroy(\'+_res.id+\');">delete</span>&nbsp;<span style="text-decoration:underline;cursor:pointer" onclick="showupdatewin(\'+_res.id+\');">update</span></td>';
		%>
		
		var out = '<table><tr><%= tbl_title %><th></th></tr>';
		tmp.length = 0; // clean up.
		for(var i in res) {
			var _res = res[i].<%= singular_name %>;
			out += '<tr><%= tbl_col %></tr>';
			tmp[_res.id] = _res;
		}
		out += '</table>';
		$('#table').html(out).fadeIn();
	});
*/
};



function show(id) {
};

function create(obj){
	var c_id = g_ldb.create(obj);
	obj.<%%= request_forgery_protection_token %> = '<%%= escape_javascript(form_authenticity_token) %>';


	<%= singular_name %>.create(obj, function(res){
		var obj = JSON.parse(res);
		g_ldb.update(c_id, {srv_id : obj.<%= singular_name %>.id});
		
		index();
	});
};

function update(obj){
	g_ldb.update(updateid, obj);
	
	obj.id = g_ldb.srv_id(updateid);
	obj.<%%= request_forgery_protection_token %> = '<%%= escape_javascript(form_authenticity_token) %>';

	<%= singular_name %>.update(obj, function(res){
		index();
	});
};

function destroy(id){
	confirm('are you sure?');

	var obj = {};
	obj.id = g_ldb.srv_id(id);
	
	g_ldb.destroy(id);

	obj.<%%= request_forgery_protection_token %> = '<%%= escape_javascript(form_authenticity_token) %>';
	<%= singular_name %>.destroy(obj, function(res) {
		index();
	});
};

</script>

